<template>
  <div class="wrap">
    <div class="container">
      <h2>密码设置完成</h2>
      <div class="reset">
        <p>账号<span> {{info.phone}} </span>密码已重置</p>
      </div>
      <div class="process">
        <p>4/4</p>
      </div>
      <van-button block @click="nextEvt">回到登录页</van-button>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter } from 'vue-router';
import { deCodeApi } from "../../utils";

const router = useRouter()

const telphone = ref("");
let info=reactive({})
info=JSON.parse(deCodeApi(sessionStorage.getItem('userInfo')))

function nextEvt(){
    router.push('/login')
}

</script>

<style lang="less" scoped>
@col1:rgb(192, 187, 187);
.wrap {
  width: 100%;
  height: 100%;
  background: url(../../images/wel.webp) no-repeat;
  background-size: 100% 100%;
  position: relative;
  .container {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    padding: 100px 45px 0px;
    .reset{
        height: 8vh;
        p{
            color: @col1;
            width: 100%;
            text-align: left;
            font-size: .7rem;
            margin: 0 auto;
            span{
                color: rgb(76, 76, 208);
                padding: 1vw;
            }
        }
    }
    .process{
        height: 10vh;
        overflow: hidden;
            p {
                color: @col1;
                width: 100%;
                text-align: center;
                font-size: .7rem;
                margin: 5vh auto;
            }
    }
    h2 {
      color: white;
      margin-bottom: 40px;
      font-weight: normal;
    }
    .van-button {
      background: rgb(228, 41, 41);
      border: none;
      color: @col1;
      border-radius: 5px;
      margin-bottom: 40px;
    }
  }
}
</style>